<template>
<view>
<search :focus="focus" :keyword="param.keyword" :placeholder="searchTitle" @setValue="setValue"></search>
<view class="history" v-if="show">
    <view>
        <text class="left">检索历史</text>
        <text class="right" style="color: red;" @tap="clearHistory">清除</text>
    </view>
</view>
<view class="result">
    <block v-for="(item, index) in result.records" :key="index">
        <navigator class="result-item" :url="'/pages/common/detail/detail?id=' + item.id">
            <view>{{item.title}}</view>
            <image src="/static/images/constant/icon/next.png"></image>
        </navigator>
    </block>
</view>
</view>
</template>

<script>
// pages/search/index.js
let app = getApp();
let input = null;
import search from "../../../components/search/index";

export default {
  data() {
    return {
      show: false,
      param: {
        page: 1,
        keyword: "",
        is_collect: 0
      },
      searchTitle: "输入姓名或公司或内容",
      focus: !0,
      keyWord: "",
      result: {}
    };
  },

  components: {
    search
  },
  props: {},
  onLoad: function (options) {},
  methods: {
    setValue(e) {
      let keyWord = e.detail;
      clearTimeout(input);
      input = setTimeout(() => {
        this.setData({
          keyWord
        });

        if (this.keyWord) {
          this.getResult();
        } else {
          this.setData({
            result: {}
          });
        }
      }, 500);
    },

    // 清楚历史记录
    clearHistory(e) {
      uni.showLoading({
        title: '清楚中'
      });
      uni.removeStorageSync({
        key: 'history',
        complete: res => {
          uni.hideLoading();
        },
        fail: res => {},
        success: res => {
          this.setData({
            show: false
          });
        }
      });
    },

    getResult(current = 1) {
      uni.showLoading({
        title: '检索中'
      });
      uni.request({
        url: `${app.globalData.baseUrl}/release-work/search/${current}?key=${this.keyWord}`,
        complete: res => {
          uni.hideLoading();
        },
        fail: res => {},
        success: res => {
          console.log(res.data.dataMap.data);
          this.setData({
            result: res.data.dataMap.data
          });
        }
      });
    },

    onShareTimeline() {}

  }
};
</script>
<style>
/* pages/search/index.ttss */

.history {
    padding: 30rpx;
    height: 150rpx;
    width: 100%;
}

.left {
    width: 30%;
    float: left;
}

.right {
    width: 70%;
    float: right;
    text-align: end;
}

.result {
    width: 96%;
    margin: 2%;
    background: white;
}

.result-item {
    padding: 20rpx 10rpx;
    font-size: 40rpx;
    border-bottom: 1px #e6e6e6 solid;
    display: flex;
    justify-content: space-between;
}

.result-item image {
    width: 40rpx;
    height: 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>